<template>
  <div class="library">
    <!-- top-nav -->
    <TopNav />
    <!-- swiper -->
    <Swiper :imgUrl="imgUrl" :ok="ok" />
    <!-- nav-list -->
    <div class="nav-list clearfix">
      <ul class="clearfix">
        <router-link to="/" tag="li">
          <img src="../../../static/img/singer.png" alt="" />
          <p>歌手</p>
        </router-link>
        <router-link to="/" tag="li">
          <img src="../../../static/img/video.png" alt="" />
          <p>视频</p>
        </router-link>
        <router-link to="/" tag="li">
          <img src="../../../static/img/radioStation.png" alt="" />
          <p>电台</p>
        </router-link>
        <router-link to="/" tag="li">
          <img src="../../../static/img/songSheet.png" alt="" />
          <p>歌单</p>
        </router-link>
        <router-link to="/" tag="li">
          <img src="../../../static/img/album.png" alt="" />
          <p>专辑</p>
        </router-link>
        <router-link to="/" tag="li">
          <img src="../../../static/img/rankingList.png" alt="" />
          <p>排行</p>
        </router-link>
      </ul>
    </div>
    <!-- song-list -->
    <div class="song-list clearfix">
      <h3 class="song-title">歌单推荐</h3>
      <div class="song-box clearfix" v-for="(item, index) in songList" :key="index">
        <Song @songData="getSongdataHandler" :list="item" />
      </div>
    </div>

  </div>

</template>

<script>
import TopNav from "../../components/TopNav"
import Song from "../../components/Song"
import Swiper from "../../components/Swiper"

export default {
  name:"Library",
  data(){
    return {
      imgUrl:[],
      ok:false,
      songList: []
    }
  },
  components: {
    TopNav,
    Song,
    Swiper
  },
  mounted () {
    this.$axios.get("http://www.wwtliu.com/sxtstu/blueberrypai/getIndexBanner.php")
      .then(res => {
        if( !res.data ){return}
        this.ok = true
        this.imgUrl = res.data.banner
      })
      .catch(error => {
        console.log(error)
      })

    this.$axios.get("http://www.wwtliu.com/sxtstu/music/baidu/list.php?type=1&count=6&offset=0")
      .then(res => {
        this.songList = res.data.song_list
        console.log(this.songList,res.data)

      })
      .catch(error => {
        console.log(error)
      })
  },
  methods: {
    getSongdataHandler(data){
      this.songImg = data.songinfo.pic_big;
      this.songTitle = data.songinfo.title;
      this.songSinger = data.songinfo.author;
      this.songSrc = data.bitrate.file_link;
    }
  }
}

</script>

<style lang="less" scoped>
  .library{
    margin-top: 88/100rem;
    margin-bottom: 98/100rem;
    .swiper-box{
      height: 350/100rem;
      .swiper-img{
        width: 100%;
        height: 350/100rem;
      }
    }
    .nav-list{
      width: 100%;
      background-color: #fff;
      margin-bottom: 20/100rem;
      ul{
        padding-bottom: 34/100rem;
        li{
          float: left;
          font-size: 28/100rem;
          width: 33.333%;
          text-align: center;
          img{
            height: 58/100rem;
            margin-bottom: 28/100rem;
            margin-top: 30/100rem;
          }
        }
      }
    }
  }

  .song-list{
    width: 100%;
    background-color: #fff;
    .song-title{
      font-size: 30/100rem;
      line-height: 83/100rem;
      margin-left: 20/100rem;
    }
  }

  .song-box{
    width: 240/100rem;
    float: left;
    margin-right: 14/100rem;
  }

  .song-box:nth-child(4),.song-box:nth-child(7){
    margin-right: 0;
  }
</style>
